<template>
  <div class="child-node">
    <div class="child-title">
      <div class="title mr-10px">{{ data.content_name }}</div>
      <div class="relative pl-22px  ml-10px  rounded-11px  flc  bg-[rgba(14,31,53,0.2)] cursor-pointer" @click="playAll">
        <div class="absolute -left-1px top-0 h-24px w-24px rounded-1/2 bg-white flc">
          <img src="@/assets/icons/pc/video-play.png" class="w-9px h-11px transform translate-x-1px" />
        </div>
        <div class="transform scale-80 text-white">全部播放</div>
      </div>
    </div>
    <scroll-mask class="child-list">
      <child-node-item v-for="item, i in nodeData" :key="item.id" v-model:node="nodeData[i]">
      </child-node-item>
    </scroll-mask>
  </div>
</template>

<script lang="ts" setup name="ChildNode">
import { useTtsaStore } from '@/store/ttsa'

const ttsaStore = useTtsaStore()

const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  modelValue: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['update:modelValue', 'nodeClick', 'change'])

const current = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
})

const playAll = () => {
  ttsaStore.next({ node_id: props.data.id, content_id: props.data.content_id })
  // 自动定位到播放内容
  const parent = document.querySelector('.popover-wrapper-active')
  const res = parent.querySelector('.child-list')
  res.scrollTop = 0
}

const defCfg = { open: true }

const nodeData = computed(() => {
  const fn = (arr) => {
    const res = reactive([])
    arr.forEach((n) => {
      const o = { ...n, ...defCfg }
      if (n.children && n.children.length > 0) o.children = fn(n.children)
      // if (n.is_catalogue) {
      res.push(o)
      // }
    })
    return res
  }
  return fn(props.data.node_tree)
})
const getParent = () => {
  const parent = []
  const fn = (arr) => {
    arr.forEach((item) => {
      parent.push(item)
      if (item.id === current.value.id) throw parent
      if (item.children) fn(item.children)
      parent.pop()
    })
  }
  try {
    fn(props.data.node_tree)
    return parent
  } catch (e) {
    return parent
  }
}
const nodeClick = (node?) => {
  emit('nodeClick', node)
}

provide('current', current)
provide('nodeClick', nodeClick)
provide('getParent', getParent)
</script>

<style lang="scss" scoped>
.child-node {
  .child-title {
    @apply flex items-center relative overflow-hidden;
    padding: 20px 24px;
    background: rgba(221, 236, 255, 0.3);
    border-radius: 20px 20px 0 0;

    &::before {
      @apply absolute left-0 -bottom-1px;
      content: '';
      border: 1px solid;
      width: 200%;
      border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.46)) 1 1;
      transform-origin: 0 0;
      transform: scale(0.5);
    }

    .title {
      font-size: 22px;
      font-weight: 600;
      color: #4A7AFB;
    }
  }

  .child-list {
    margin: 10px 10px 20px 24px;
    // padding: 14px 0px 20px 24px;
    max-height: 380px;
    padding-right: 10px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-thumb:hover,
    &::-webkit-scrollbar-thumb:active {
      background: #ffffff;
    }

    :deep(.child-item .child-item) {
      font-weight: 400;
    }
  }
}
</style>